/* eslint-disable react-refresh/only-export-components */
import { ResultPage } from 'antd-mobile'
import { AlipayCircleFill } from 'antd-mobile-icons'
import { getOrderDetailApi } from '../../api/order'
import { useLoaderData, useNavigate } from 'react-router-dom'

function PayResult() {
  const nav = useNavigate()
  const { info } = useLoaderData()
  console.log(info)

  const details = [
    {
      label: '火车票',
      value: info.order_info.total + '元',
      bold: true
    },
    {
      label: '付款方式',
      value: '账户余额'
    }
  ]

  return (
    <div>
      <ResultPage
        status="waiting"
        title={<div style={{ fontSize: 15 }}>支付成功</div>}
        description={
          <>
            <span style={{ fontSize: 32, color: '#ffffff', marginRight: 4 }}>
              ¥
            </span>
            <span style={{ fontSize: 48, color: '#ffffff' }}>
              {info.order_info.total}
            </span>
          </>
        }
        icon={<AlipayCircleFill />}
        details={details}
        // 主要 / 次要
        secondaryButtonText="首页"
        onSecondaryButtonClick={() => nav('/')}
        primaryButtonText="订单详情"
        // 注意：跳转到订单详情页的时候，需要通过路由的 state 传参，把订单详情对象带过去
        onPrimaryButtonClick={() => nav('/order-pay', { state: info })}
      ></ResultPage>
    </div>
  )
}

export default PayResult

export const loader = async ({ request }) => {
  const url = new URL(request.url)
  const spObj = Object.fromEntries(url.searchParams)
  const { data: info } = await getOrderDetailApi(spObj.out_trade_no)
  return { info }
}
